<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>个人资料修改</title>
        <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.3.0/weui.min.css" />
        <script src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js" charset="utf-8"></script>
    </head>

    <body class="modify">
        <!-- 头部 -->
        <header class="header">
            <span id="backBtn">&lt;</span>
            修改个人资料
        </header>

        <!-- 主体部分 -->
        <main class="main">
            <div class="weui-cells">
                <!-- 上传头像 -->
                <div class="weui-cell weui-cell_access">
                    <span class="weui-cell__bd" id="js_cell_tl1_tips" aria-hidden="true">
                        <span>更换头像</span>
                    </span>
                    <span class="weui-cell__ft" aria-hidden="true" id="js_cell_tl1_link">
                        <label>
                            <input type="file" id="avatorbox" style="display:none;">
                            <img src="../../assets/images/dog.jpg" id="avator" data-value="">
                        </label>
                    </span>
                </div>

                <!-- 昵称 -->
                <div role="option" class="weui-cell ">
                    <div class="weui-cell__bd">
                        <p>昵称</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input id="nickname" class="weui-input" placeholder="请输入用户名" value="用户名" />
                    </div>
                </div>

                <!-- 性别 -->
                <div class="weui-cell weui-cell_access">
                    <span class="weui-cell__bd">
                        <span>性别</span>
                    </span>
                    <span class="weui-cell__ft" id="gender" data-value="0">男</span>
                </div>

                <!-- 生日 -->
                <div class="weui-cell weui-cell_access">
                    <span class="weui-cell__bd">
                        <span>生日</span>
                    </span>
                    <span class="weui-cell__ft" id="birthday">未选择</span>
                </div>

                <!-- 所在省份 -->
                <div class="weui-cell weui-cell_access">
                    <span class="weui-cell__bd">
                        <span>所在省份</span>
                    </span>
                    <span class="weui-cell__ft" id="province" data-value="0">未选择</span>
                </div>

                <!-- 所在城市 -->
                <div class="weui-cell weui-cell_access">
                    <span class="weui-cell__bd">
                        <span>所在城市</span>
                    </span>
                    <span class="weui-cell__ft" id="city" data-value="0">未选择</span>
                </div>

                <!-- 个性签名 -->
                <div class="weui-cell weui-cell_access">
                    <span class="weui-cell__bd">
                        <span>个性签名</span>
                    </span>
                </div>
                <div class="weui-cells__group weui-cells__group_form">
                    <div class="weui-cells weui-cells_form">
                        <div class="weui-cell weui-cell_active">
                            <div class="weui-cell__bd">
                                <textarea id="sign" maxlength="20" class="weui-textarea" placeholder="请填写个人签名"
                                    rows="3"></textarea>
                                <div role="option" aria-live="polite" class="weui-textarea-counter">
                                    <span id="textNum">0</span>/20
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 保存按钮 -->
            <button type="button" class="weui-btn weui-btn_primary" id="saveBtn">保存信息</button>
        </main>
    </body>

</html>